import React, { useRef } from 'react'
import './MydesignBott.css'
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import Animation from '../../SelectedTemplates/AnimationList/animation'
const Index: React.FC = () => {
  // 创建一个引用来获取容器元素
  const containerRefBox = useRef<HTMLDivElement>(null);
  //  定义滑动到右侧的函数
  const scrollRight1 = () => {
    if (containerRefBox.current) {          //每次滚动的距离    平滑滚动
      containerRefBox.current.scrollBy({ left: 600, behavior: 'smooth' });
    }
  }
  // 定义滑动到左侧的函数
  const scrollLeft1 = () => {
    if (containerRefBox.current) {     //每次滚动的距离    平滑滚动
      containerRefBox.current.scrollBy({ left: -600, behavior: 'smooth' });
    }
  }
  return (
    <div className='MydesignBott_Box'>
      <div className='MydesignBott_title'><h2>精选模版</h2><p>查看更多{'>'}</p></div>
      <div className='MydesignBott_text' ref={containerRefBox}>
        {/* 左按钮 */}
        <button onClick={scrollLeft1} className='leftCon_Btn'><LeftOutlined /></button>
        {/* 右按钮 */}
        <button onClick={scrollRight1} className='rightCon_Btn'><RightOutlined /></button>
        {/* 内容 */}
        <div className='MydesignBott_Con' >
          <div className="Design_Container">
            <Animation></Animation>
          </div>
          <div className="Design_Container">

          </div>
          <div className="Design_Container">

          </div>
          <div className="Design_Container">

          </div>
          <div className="Design_Container">

          </div>
          <div className="Design_Container">

          </div>
        </div>
      </div>

    </div >
  )
}

export default Index